/* 


1 初始化表单内的组件 
  1 复制粘贴 ！！ 

2 通过 location和URLSearchParams 获取传递过来的id

3 根据id 发送请求获取被编辑的文章详情数据

4 给发布按钮绑定点击事件
  1 获取对应的数据 拼接成 formdata格式的参数
  2 发送给后台 完成编辑
  3 编辑成功了 重定向回文章列表页面 ！！ 


 */

$(function () {

  // 全局变量 文章id
  let id;


  // 1 文件上传框 绑定 change事件
  $("#inputCover").change(function () {
    const file = this.files[0];
    $("#coverimg").prop("src", URL.createObjectURL(file));
  })
  // 2 发送请求 获取 文章列表数据
  function getCategoryList() {
    $.get("/admin/category/list", function (res) {
      let html = "";
      res.data.forEach(value => {
        html += `<option value="${value.id}" >${value.name}</option>`;
      });
      $("#category").html(html);
    })
  }

  // 3 初始化 日期选择器
  function renderDate() {
    //执行一个laydate实例
    layui.laydate.render({
      elem: '#articleDate' //指定元素
    });
  }

  // 4 初始化富文本编辑器
  function renderEditor() {
    tinymce.init({
      selector: '#articleContent',
      language: 'zh_CN',//注意大小写
    });
  }


  // 5 发送请求 获取 数据 渲染到 表单组件中
  function getArticleDetail() {
    const usp = new URLSearchParams(this.location.search);
    id = usp.get("id");

    $.get("/admin/article/search", { id }, function (res) {

      const { title, cover, categoryId, date, content } = res.data;
      // 5.1 填充 标题
      $("[name='title']").val(title);
      $("#coverimg").prop("src", cover);
      $("[name='categoryId']").val(categoryId);
      $("[name='date']").val(date);
      // 文章内容  1  直接给文本域赋值  2 如果失败了 查阅 tinymce文档 查看如何赋值 
      $("#articleContent").val(content);

    })

  }




  getCategoryList();
  renderDate();
  renderEditor();
  getArticleDetail();


  // 6  给 “发布” 绑定点击事件
  $(".btn-edit").click(function () {
    postArticle("已发布");
   })

  //  6 给 “草 稿” 绑定点击事件
  $(".btn-draft").click(function () {
    postArticle("");
  })



  function postArticle(state) {

    const fd = new FormData($("#form")[0]);

    // 假设我们没有修改过  文章封面 那么通过 formdata获取到的file文件 没有名称 没有大小，
    //  （不清楚后台接收到这样文件能不能正常识别）

    // 对应富文本的内容 需要单独添加到formdata中
    const content = tinyMCE.editors["articleContent"].getContent();
    fd.append("content", content);
    fd.append("state", state);
    fd.append("id", id);

    // fd.forEach((v,k)=>console.log(v,k));

    $.ajax({
      url: "/admin/article/edit",
      type: "post",
      data: fd,
      contentType: false,
      processData: false,
      success(res) {
        if (res.code === 200) {
          // 5.3 返回文章列表页面
          location.href = "article_list.html";
        }
      }
    })



  }
})